<template>
  <div class="text-box">
    <div :class="['txt', { 'over-hidden': !unfold }]" ref="textBox">
      <div ref="spanBox">{{content}}</div>
    </div>
    <div class="btn" v-if="ifOver" @click="unfold = !unfold">
      <i class="el-icon-arrow-down" v-if="!unfold"></i>
      <i class="el-icon-arrow-up" v-else></i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'text-box',
  data() {
    return {
      ifOver: false, // 文本是否超出三行，默认否
      unfold: false, // 文本是否是展开状态 默认为收起
    }
  },
  props: {
    content: {
      type: String,
      default: '2',
    },
  },
  mounted() {
    // 判断是否显示展开收起按钮
    this.$nextTick(() => {
      console.log(this.$refs.spanBox.offsetHeight)
      // console.log(this.$refs.textBox.offsetHeight)
      // this.ifOver = this.$refs.spanBox[0].offsetHeight > this.$refs.textBox[0].offsetHeight
      // console.log(this.ifOver)
    })
  },
}
</script>
<style scoped>
.txt {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}
.over-hidden {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>
